<template>
    <div class="components-container">
        <div class="header-form">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:100px;">灵堂租用日期</label>
                <div class="layui-inline">
                    <el-radio-group v-model="selectDataEixend.regDateValue" @change="getData">
                        <el-radio-button :label="DateSelectMode.now" class="radio">当日</el-radio-button>
                        <el-radio-button :label="DateSelectMode.tomorrow" class="radio">明日</el-radio-button>
                        <el-radio-button :label="DateSelectMode.future" class="radio">以后</el-radio-button>
                        <el-radio-button :label="DateSelectMode.all" class="radio">全部</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        </div>
        <div>
            <ul class="toolList">
                <li>
                    <el-button type="primary" @click="btnSearch" :loading="this.$store.state.isloading">刷新</el-button>
                </li>
                <li v-if="btnShow(item.BTNVALUE)" v-for="(item, index) in $store.state.btnListCommon" @click="operate(item.BTNVALUE)">
                    <el-button type="primary" :value="item.BTNSHOWNAME" v-text="item.BTNSHOWNAME"></el-button>
                </li>
            </ul>
        </div>
        <dataTable :headList="headList" :dataList="dataList" :pageOrder="pageOrder" @pageChange="pageChange" @selectRow="selectRow"></dataTable>
        <!-- 老版本（萧山、海曙、奉化、开化） -->
        <mainmodel ref="models" @refreshData="getData"></mainmodel>
        <printmodal ref="printPdf"></printmodal>
    </div>
</template>

<script>
import apiBase from "@/api/apiBase.js";
import dataTable from "@/components/Table/DataTable";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { manage } from "@/mixins/managePage.js";
import { DATESELECTMODE } from "@/const/const.js";
import mainmodel from "./linBespokeMain";
import printmodal from "@/components/Pdf/Print";
import { PRINT } from "@/components/Pdf/PDF.js";
import { PRPORDER } from "@/const/orderConst.js";
import { ORDER } from "@/const/orderConst.js";

export default {
    name: "phoneAppointment",
    mixins: [manage],
    data() {
        return {
            DateSelectMode: DATESELECTMODE,
            selectData: {
                WorkDateEquals: null,
            },
            selectDataEixend: {
                regDateValue: null
            },
        };
    },
    methods: {
        //获取电话预约数据
        getData() {
            let data = {
                PageIndex: this.pageOrder.currentPage,
                PageSize: this.pageOrder.pageSize,
                OrderBy: this.pageOrder.orderType,
                OrderByType: this.pageOrder.orderSort,
                Data: JSON.parse(JSON.stringify(this.selectData))
            };
            apiBase.DoService(
                data,
                apiBase.getApiAdress().LinBespoke.QueryRitualReserve,
                res => {
                    this.dataList = res.data.content.OutData;
                    this.pageOrder.totalNum = res.data.content.RecordCount;
                   
                }
            );
        },
        //获取表头
        getColumns() {
            let data = {};
            apiBase.DoService(
                data,
                apiBase.getApiAdress().Column.GetMourningReserveColumns,
                res => {
                    this.headList = res.data.content;
                }
            );
        },
        //功能操作
        operate(order) {
            this.order = order;
            this.dataRepeat();
            switch (this.order) {
                case '预约':
                    this.$refs.models.open(this.order, false);
                    break;
                case PRPORDER.MODIFY:
                    this.$refs.models.open(this.order, this.currentRow.LTRID);
                    break;
                case PRPORDER.DELETE:
                    this.confirm(callback => {
                        this.dataDelete();
                    });
                    break;
                case PRPORDER.INFO:
                    this.$refs.models.open(this.order, this.currentRow.LTRID);
                    break;
                default:
            }
        },
        //数据重置
        dataRepeat() {

        },
        //登记删除
        dataDelete() {
            let Data = {
                LTRID: this.currentRow.LTRID
            };
            apiBase.DoService(
                Data,
                apiBase.getApiAdress().LinBespoke.DeleteRitualReserve,
                res => {
                    this.getData();
                }
            );
        },
        initSeachdata() {
            this.selectDataEixend.regDateValue = DATESELECTMODE.now;
            this.selectData.WorkDateEquals = formatDate(new Date(), "yyyyMMdd");
        },
        btnShow(btn) {
            switch (btn) {
                case "预约":
                    return true;
                    break;
                case "修改":
                    if (this.currentRow) return true;
                    break;
                case "删除":
                    if (this.currentRow) return true;
                    break;
                case "详情":
                    if (this.currentRow) return true;
                    break;
                default:
                    break;
            }
        }
    },

    components: {
        //  sweetModal,
        dataTable,
        mainmodel,
        printmodal,
    },
    mounted() {
        this.initSeachdata();
    },
    activated() {
        this.getData();
    },
    created() {
        //this.getData();
        this.getColumns();
    },
    watch: {
        "selectDataEixend.regDateValue": function(val) {
            this.selectData.WorkDateGreate = null;
            this.selectData.WorkDateEquals = null;
            switch (val) {
                case DATESELECTMODE.now:
                    this.selectData.WorkDateEquals = formatDate(
                        new Date(),
                        "yyyyMMdd"
                    );
                    break;
                case DATESELECTMODE.tomorrow:
                    var day = new Date();
                    day.setDate(day.getDate() + 1);
                    this.selectData.WorkDateEquals = formatDate(
                        day,
                        "yyyyMMdd"
                    );
                    break;
                case DATESELECTMODE.future:
                    this.selectData.WorkDateGreate = formatDate(
                        new Date(),
                        "yyyyMMdd"
                    );
                    break;
                default:
                    break;
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.el-button + .el-button {
    margin-left: 0;
}
.sw-table {
    width: 600px;
}
.sw-table-lable {
    width: 100px;
}
.sw-table-input {
    width: 200px;
}
.sweet-content-content {
    width: 100%;
}
</style>